<template>
  <div class="container">
    <div class="page-header">
      <h1>🌹 小红书助手</h1>
      <p style="color: #666; font-size: 14px; margin: 8px 0 0 0;">
        您的小红书内容创作好帮手
      </p>
    </div>

    <div v-if="!isLoggedIn" class="login-prompt">
      <a-card hoverable style="margin-bottom: 20px;">
        <template #title>
          <div style="text-align: center;">
            <span>欢迎使用小红书助手</span>
          </div>
        </template>
        <div style="text-align: center; padding: 20px 0;">
          <p style="color: #666; margin-bottom: 20px;">
            请先登录以享受完整功能
          </p>
          <div class="btn-group">
            <button class="nav-btn" @click="$router.push('/login')">
              登录
            </button>
            <button class="nav-btn secondary" @click="$router.push('/register')">
              注册
            </button>
          </div>
        </div>
      </a-card>
    </div>

    <div v-else class="main-content">
      <a-card hoverable style="margin-bottom: 16px;">
        <template #title>
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <span>功能面板</span>
            <a-button type="text" @click="logout">退出登录</a-button>
          </div>
        </template>
        
        <div class="feature-grid">
          <a-button 
            type="primary" 
            size="large" 
            long
            style="margin-bottom: 12px;"
            @click="analyzeContent"
          >
            📊 内容分析
          </a-button>
          
          <a-button 
            type="primary" 
            status="success"
            size="large" 
            long
            style="margin-bottom: 12px;"
            @click="generateTags"
          >
            🏷️ 智能标签
          </a-button>
          
          <a-button 
            type="primary"
            status="warning"
            size="large" 
            long
            style="margin-bottom: 12px;"
            @click="schedulePost"
          >
            ⏰ 定时发布
          </a-button>
        </div>
      </a-card>

      <a-card hoverable>
        <template #title>
          <span>数据统计</span>
        </template>
        <div class="stats">
          <div class="stat-item">
            <div class="stat-number">{{ stats.posts }}</div>
            <div class="stat-label">发布笔记</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ stats.likes }}</div>
            <div class="stat-label">总点赞</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ stats.followers }}</div>
            <div class="stat-label">粉丝数</div>
          </div>
        </div>
      </a-card>
    </div>

    <div class="footer-nav">
      <a-button 
        type="primary"
        status="normal"
        size="small" 
        long
        @click="$router.push('/feedback')"
      >
        💬 意见反馈
      </a-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'

const isLoggedIn = ref(false)
const stats = ref({
  posts: 0,
  likes: 0,
  followers: 0
})

onMounted(() => {
  // 检查登录状态
  checkLoginStatus()
  // 加载统计数据
  loadStats()
})

const checkLoginStatus = () => {
  // 从Chrome storage中获取登录状态
  chrome.storage.local.get(['user'], (result) => {
    isLoggedIn.value = !!result.user
  })
}

const loadStats = () => {
  // 模拟加载统计数据
  setTimeout(() => {
    stats.value = {
      posts: 156,
      likes: 2345,
      followers: 567
    }
  }, 500)
}

const logout = () => {
  chrome.storage.local.remove(['user'], () => {
    isLoggedIn.value = false
    Message.success('已退出登录')
  })
}

const analyzeContent = () => {
  Message.info('内容分析功能开发中...')
}

const generateTags = () => {
  Message.info('智能标签功能开发中...')
}

const schedulePost = () => {
  Message.info('定时发布功能开发中...')
}
</script>

<style scoped>
.login-prompt {
  padding: 20px 0;
}

.main-content {
  padding-bottom: 60px;
}

.feature-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.stat-item {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.footer-nav {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
}
</style> 